<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/cate.css">
</head>
<body>
    <div class="container">

    <!------------------------------------------------头部 ----------------------------------------------->
<header>
<div class="header">
   <span>分类</span>
<div class="search">
    <input type="text" placeholder="搜索商品">
    <a href=""><img src="images/cate/search.jpg" alt=""></a>
</div>
      
    </div>


</header>
    <!------------------------------------------------分类列表----------------------------------------------->
<div class="cate_list">
<div class="left">
    <ul>
        <li>热门推荐</li>
        <li>木地板</li>
        <li>瓷砖</li>
        <li>木门</li>
        <li>卫浴洁具</li>
        <li>全屋定制</li>
        <li>橱柜</li>
        <li>家具</li>
        <li>家电智能</li>
        <li>五金建材</li>
        <li class="slide"></li>
    
    </ul>
</div>


<!------------------------------------------------列表内容----------------------------------------------->

<div class="right">
    
<div class="hot">
<div class="title">
    <h1>热门推荐</h1>
</div>
<div class="card_list clearfix">
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
<div class="card">
    <img src="images/cate/good01.jpg" alt="">
    <p>电饭锅</p>
</div>
</div>

</div>
<div class="hot">
    <div class="title">
        <h1>热门推荐</h1>
    </div>
    <div class="card_list clearfix">
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    <div class="card">
        <img src="images/cate/good01.jpg" alt="">
        <p>电饭锅</p>
    </div>
    </div>
    
    </div>
    <div class="hot">
        <div class="title">
            <h1>热门推荐</h1>
        </div>
        <div class="card_list clearfix">
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        <div class="card">
            <img src="images/cate/good01.jpg" alt="">
            <p>电饭锅</p>
        </div>
        </div>
        
        </div>
</div>
</div>


     <!-- 底部导航-->
     <footer>

        <div class="footer">
            <ul class="footer-nav">
                <li>
                    <a href="index.html">
                        <img src="images/icon01.jpg" alt="">
                        <span>首页</span>
                    </a></li>
                <li><a href="cate.html"><img src="images/icon02-a.jpg" alt="">
                        <span>分类</span></a></li>
                <li><a href="car.html">
                        <img src="images/icon03.jpg" alt="">
                        <span>购物车</span></a></li>
                <li><a href="me.html">
                        <img src="images/icon04.jpg" alt="">
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </div>
    </footer>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">	</script>
		<script type="text/javascript">
		
				 $(".cate_list .left ul li").click(function() {
				var $this = $(this);
				//获取列表的下标
				var index = $this.index();
				
				// 获取列表对应选项卡的高度
				
				// 知识点
				// height() - 纯内高height
				// innerHeight() - height+padding
				// outerHeight() - height+padding+border
				// outerHeight(true) - height+padding+border+margin 在父容器上方的时候，会产生负数
				
					
				var sum = 0;
			    var $layerList =$(".cate_list .right>div");
				for(let i = 0;i<index;i++)
			   {
				 let mbottom=$layerList.eq(i).css('marginBottom').replace('px', '');  
				 // let mtop=$(".right .content>div").eq(i).css('marginTop').replace('px', '');  
				  mbottom = Number(mbottom);	
				 // mtop = Number(mtop);
				  sum+=$layerList.eq(i).outerHeight()+mbottom; 
				  
				}
				var l = -(sum);
				
				
				// var l = -(index * height); 
				
				// $(".main-page .nav div").removeClass("on");
				// 点击之后列表背景变为蓝色
				// $(".main-page .nav div").eq(index).addClass("on");
				var position = $(this).position();
				var height = $(this).height();
				$(".cate_list .left ul .slide").css({
					// opacity:1,
					top:+position.top,
					// width:"30px",
                    height:height,	
				});
				$(".cate_list .right>div:eq(0)").stop().animate(
				{
					"margin-top": l
				}, 500);
			
			});
		</script>

</body>
</html>